<template>
  <div class="pdf-viewer-container">
    <!-- 控制栏 -->
    <div class="controls">
      <button @click="prevPage" :disabled="page <= 1">上一页</button>
      <span>第 {{ page }} / {{ pageCount }} 页</span>
      <button @click="nextPage" :disabled="page >= pageCount">下一页</button>

      <button @click="zoomOut" :disabled="scale <= 0.5">缩小</button>
      <span>缩放: {{ Math.round(scale * 100) }}%</span>
      <button @click="zoomIn" :disabled="scale >= 2">放大</button>
    </div>

    <!-- PDF 渲染区域 -->
    <div class="pdf-wrapper">
      <VuePdfEmbed 
        ref="pdfRef" 
        :source="pdfSource" 
        :page="page" 
        :scale="scale" 
        @loaded="handleDocumentLoaded" 
        @rendering-failed="handleRenderingFailed" 
      />            
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps } from "vue";
import VuePdfEmbed from "vue-pdf-embed";

// 定义组件接收的属性
const props = defineProps({
  // PDF文件源，可以是URL、Uint8Array或PDFDataRangeTransport
  pdfSource: {
    type: [String, Uint8Array, Object],
    required: true,
    description: "PDF文件的来源，可以是URL、Uint8Array或PDFDataRangeTransport对象"
  }
});

// PDF 组件引用
const pdfRef = ref(null);

// PDF 状态
const page = ref(1);
const pageCount = ref(0);
const scale = ref(1);

// 当PDF源变化时重置状态
watch(
  () => props.pdfSource,
  () => {
    page.value = 1;
    pageCount.value = 0;
    scale.value = 1;
  }
);

// PDF 加载完成回调
function handleDocumentLoaded(pdf) {
  console.log("PDF 加载完成!", pdf);
  pageCount.value = pdf.numPages;
}

// PDF 渲染失败回调
function handleRenderingFailed(error) {
  console.error("PDF 渲染失败:", error);
}

// 分页功能
function prevPage() {
  if (page.value > 1) {
    page.value--;
  }
}

function nextPage() {
  if (page.value < pageCount.value) {
    page.value++;
  }
}

// 缩放功能
function zoomIn() {
  if (scale.value < 2) {
    scale.value += 0.25;
  }
}

function zoomOut() {
  if (scale.value > 0.5) {
    scale.value -= 0.25;
  }
}

// 监听页码变化，确保在范围内
watch(page, (newPage) => {
  if (newPage < 1) {
    page.value = 1;
  }
  if (newPage > pageCount.value && pageCount.value > 0) {
    page.value = pageCount.value;
  }
});
</script>

<style scoped>
.pdf-viewer-container {
  max-width: 900px;
  margin: 2rem auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  border-radius: 8px 8px 0 0;
  flex-wrap: wrap;
}

.controls button {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.controls button:hover:not(:disabled) {
  background-color: #f0f0f0;
  border-color: #ccc;
}

.controls button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.controls span {
  font-size: 0.9rem;
  min-width: 100px;
  text-align: center;
}

.pdf-wrapper {
  min-height: 70vh;
  overflow: auto;
  background-color: #e9e9e9;
  padding: 1rem;
}

/* 覆盖vue-pdf-embed的内部样式 */
:deep(.vue-pdf-embed > div) {
  margin: 0 auto 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: white;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .controls {
    gap: 0.5rem;
    padding: 0.75rem;
  }
  
  .controls button {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .controls span {
    min-width: auto;
    font-size: 0.85rem;
  }
}
</style>
